<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>文本编辑器</title>
<script type="text/javascript">
window.UEDITOR_HOME_URL = "<%=basePath %>resources/ueditor/";
</script>
<script type="text/javascript" src="<%=basePath %>resources/jquery/jquery-1.10.2.js"></script>
<script type="text/javascript" src="<%=basePath %>resources/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="<%=basePath %>resources/ueditor/ueditor.all.js"></script>

<link type="text/css" href="<%=basePath %>resources/ueditor/themes/default/css/ueditor.css" rel="stylesheet">

<script type="text/javascript">

var domUtils = UE.dom.domUtils;

function createEditor() {
    enableBtn();
    UE.getEditor('editor',options)
}
function getAllHtml() {
    alert(UE.getEditor('editor').getAllHtml())
}
function getContent() {
    var arr = [];
    arr.push("使用editor.getContent()方法可以获得编辑器的内容");
    arr.push("内容为：");
    arr.push(UE.getEditor('editor').getContent());
    alert(arr.join("\n"));
}
function getPlainTxt() {
    var arr = [];
    arr.push("使用editor.getPlainTxt()方法可以获得编辑器的带格式的纯文本内容");
    arr.push("内容为：");
    arr.push(UE.getEditor('editor').getPlainTxt());
    alert(arr.join('\n'))
}
function setContent() {
    var arr = [];
    arr.push("使用editor.setContent('欢迎使用ueditor')方法可以设置编辑器的内容");
    UE.getEditor('editor').setContent('欢迎使用ueditor');
    alert(arr.join("\n"));
}
function setDisabled() {
    UE.getEditor('editor').setDisabled('fullscreen');
    disableBtn("enable");
}
function setEnabled() {
    UE.getEditor('editor').setEnabled();
    enableBtn();
}
function getText() {
    //当你点击按钮时编辑区域已经失去了焦点，如果直接用getText将不会得到内容，所以要在选回来，然后取得内容
    var range = UE.getEditor('editor').selection.getRange();
    range.select();
    var txt = UE.getEditor('editor').selection.getText();
    alert(txt)
}
function getContentTxt() {
    var arr = [];
    arr.push("使用editor.getContentTxt()方法可以获得编辑器的纯文本内容");
    arr.push("编辑器的纯文本内容为：");
    arr.push(UE.getEditor('editor').getContentTxt());
    alert(arr.join("\n"));
}
function hasContent() {
    var arr = [];
    arr.push("使用editor.hasContents()方法判断编辑器里是否有内容");
    arr.push("判断结果为：");
    arr.push(UE.getEditor('editor').hasContents());
    alert(arr.join("\n"));
}
function setFocus() {
    UE.getEditor('editor').focus();
}
function deleteEditor() {
    disableBtn();
    UE.getEditor('editor').destroy();
}
function disableBtn(str) {
    var div = document.getElementById('btns');
    var btns = domUtils.getElementsByTagName(div, "input");
    for (var i = 0, btn; btn = btns[i++];) {
        if (btn.id == str) {
            domUtils.removeAttributes(btn, ["disabled"]);
        } else {
            btn.setAttribute("disabled", "true");
        }
    }
}
function enableBtn() {
    var div = document.getElementById('btns');
    var btns = domUtils.getElementsByTagName(div, "input");
    for (var i = 0, btn; btn = btns[i++];) {
        domUtils.removeAttributes(btn, ["disabled"]);
    }
}

var options = {
    lang:/^zh/.test(navigator.language || navigator.browserLanguage || navigator.userLanguage) ? 'zh-cn' : 'en',
    langPath:UEDITOR_HOME_URL + "lang/",

    initialFrameWidth:860,
    initialFrameHeight:420,
    focus:true
};
$(function() {
	UE.getEditor('editor',options);
});

</script>
</head>
<body>
	<script type="text/plain" id="editor" name="editor">
	</script>

	<div class="section">
		<h4>常用API</h4>

		<div id="allbtn" class="details">
			<div id="btns">
				<div>
					<input type="button" value="获得整个html的内容" onclick="getAllHtml()">
					<input type="button" value="获得内容" onclick="getContent()"> <input
						type="button" value="写入内容" onclick="setContent()"> <input
						type="button" value="获得纯文本" onclick="getContentTxt()"> <input
						type="button" value="获得带格式的纯文本" onclick="getPlainTxt()"> <input
						type="button" value="判断是否有内容" onclick="hasContent()"> <input
						type="button" value="使编辑器获得焦点" onclick="setFocus()">
				</div>
				<div>
					<input type="button" value="获得当前选中的文本" onclick="getText()" /> <input
						id="enable" type="button" value="可以编辑" onclick="setEnabled()" /> <input
						type="button" value="不可编辑" onclick="setDisabled()" /> <input
						type="button" value="隐藏编辑器"
						onclick=" UE.getEditor('editor').setHide()" /> <input
						type="button" value="显示编辑器"
						onclick=" UE.getEditor('editor').setShow()" />
				</div>

			</div>
			<div>
				<input type="button" value="创建编辑器" onclick="createEditor()" /> <input
					type="button" value="删除编辑器" onclick="deleteEditor()" />
			</div>
		</div>
	</div>
</body>
</html>